<template>
	<div class="page"> 
		<div class="body" v-loading="loading">
			<div class="login-box">
				<div class="banner">
					<img src="../../static/images/login_banner.png">
				</div>
				<div class="form">
					<h2 class="hd-title">欢迎登录</h2> 
					<div class="item">
						<el-input type="text" v-model="user_name" placeholder="请输入登录账号">
							<i slot="prefix" class="icon el-input__icon el-icon-user"></i>
						</el-input> 
					</div>
					<div class="item">
						<el-input type="password" v-model="user_name" placeholder="请输入登录密码">
							<i slot="prefix" class="icon el-input__icon el-icon-lock"></i>
						</el-input>
					</div>
					<div class="checkbox">
						<el-checkbox v-model="checked">记住密码</el-checkbox>
					</div>					
					<div class="item">
						<el-button type="primary" class="btn" @click="login">登 录</el-button>
					</div>
				</div>
			</div>
			<div class="copyright">备案号：<a href="https://beian.miit.gov.cn/">粤ICP备 2020080755号-1</a>，Copyright 2023 by 广州瑞丰生物科技有限公司</div>
		</div> 
	</div>
</template>

<script>
	export default{
		name:'',
		data(){
			return {
				user_name:'',
				checked:false,
				loading:false
			}
		}, 
		created() {		 
		}, 
		mounted(){ 
		}, 
		methods:{
			async login(){
				console.log(123)
				let res=await this.$api.user_api.login({
					"mobile_number":12345678901,
					"pwd":"admin"
				})
				this.loading=true;
				console.log(res)
			}
			
		},
		computed: { 
			
		}, 
		components: {
			
		},
	}
</script>

<style lang="less" scoped>
	.page,.body{
		height:100%;
		overflow-y:hidden;
	}
	.body{
		display: flex;
		justify-content: center;
		align-items: center;
		background:url('../../static/images/login_bg.png') no-repeat center;
		background-size:100% 100%;
	}
	.copyright{
		position: fixed;
		left:0;
		bottom:20px;
		width:100%;
		color:#fff;
		font-size: 12px;
		text-align: center;
		a{
			color:#fff;
		}
	}
	.login-box{
		display: flex;
		justify-content: space-between;
		width: 50%;
		min-width: 1000px;
		.banner{
			width: 450px;
			img{
				width: 100%;
			}
		}
	}
	.form{
		width:330px; 
		padding:50px 50px 100px;
		background:#fff ;
		border-radius: 10px;
		.item{
			margin-top: 30px;
		}
		.icon{
			font-size: 20px;
			color:#09f;
		}
		.checkbox{
			margin-top: 10px;
		}
		.btn{
			width: 100%;
		}
	}
</style>